<template>
	<view class="top-bg">
		<z-nav-bar title="记录问题"></z-nav-bar>
		<view class="item-title flex_sbc">
			<view></view>
			<view class="add-button" style="width: 200rpx" @click="intoQuestion">从问题库导入</view>
		</view>
		<view class="item-content">
			<view class="uni-mx-32 uni-pb-32 uni-pt-32">
				<view class="z-font-32 uni-mt-32">添加视频或图片</view>
				<z-preview-media :srcStr="questionData.material" @change="materialChange" addButton delIcon></z-preview-media>
			</view>
		</view>
	</view>
	
	<view class="item-title flex_sbc">
		<view>添加训练环境</view>
		<image
			v-if="questionData.environmentList && questionData.environmentList.length"
			:src="setting.oss_pub_domain + '/app-img/icon/icon_edit.png'"
			class="icon-size-32"
			@click="selTag('environment')"
		></image>
	</view>
	<view style="width: 686rpx;">
		<z-add-button
			v-if="!questionData.environmentList || !questionData.environmentList.length"
			text="添加环境"
			class="uni-mx-32 uni-mb-32"
			@click="selTag('environment')"
		></z-add-button>
	</view>
	<view v-if="questionData.environmentName" class="flex_fsc flex_wrap uni-mx-32">
		<view v-for="(tag, index) in questionData.environmentName.split(',')" :key="index" class="tag">
			{{ tag }}
		</view>
	</view>
	<view class="line-spacing"></view>

	<view v-if="selStudent" class="line-spacing line-spacing-height"></view>
	<view v-if="selStudent" class="uni-pa-32">
		<select-student @done="(e) => (selStudentObj = e)"></select-student>
	</view>
	<view class="line-spacing line-spacing-height"></view>
	<view v-for="(question, index) in questionData.descList" :key="index">
		<view class="item-title flex_sbc">
			<view>问题{{ index + 1 }}</view>
			<uni-icons v-if="index" type="trash-filled" size="24" color="#FF0000" @click="delDesc(index)"></uni-icons>
		</view>
		<view class="line-spacing"></view>
		<view class="item-title flex_sbc">
			<view>
				<text class="uni-red">*</text>
				添加问题描述
			</view>
			<image
				v-if="question.descriptionTag && question.descriptionTagList"
				:src="setting.oss_pub_domain + '/app-img/icon/icon_edit.png'"
				class="icon-size-32"
				@click="selTag('descriptionTag', index)"
			></image>
		</view>
		<view style="width: 686rpx;">
			<z-add-button
				v-if="!question.descriptionTag || !question.descriptionTagList"
				text="添加标签"
				class="uni-mx-32 uni-mb-32"
				@click="selTag('descriptionTag', index)"
			></z-add-button>
		</view>
		<view v-if="question.descriptionTagName" class="flex_fsc flex_wrap uni-mx-32">
			<view v-for="(tag, index) in question.descriptionTagName.split(',')" :key="index" class="tag">
				{{ tag }}
			</view>
		</view>
		<view class="line-spacing"></view>
		<view class="flex_fsc uni-mx-32 uni-my-20">
			<view>
				<text class="uni-red">*</text>
				问题名称
			</view>
			<input
				v-model="question.name"
				type="text"
				class="input-box"
				placeholder="简要描述问题名称"
				placeholder-class="uni-placeholder"
			/>
		</view>
		<view class="line-spacing"></view>
		<view class="uni-mx-32">
			<view class="z-font-32 text-w uni-mt-32">问题描述</view>
			<textarea
				v-model="question.description"
				class="text"
				placeholder="请输入内容(多行)"
				placeholder-class="uni-placeholder"
			></textarea>
		</view>
		<view class="line-spacing"></view>
		<view class="uni-mx-32 uni-pb-40">
			<view class="add-course-plan flex_cc" @click="associatedSolution(index)">
				<image :src="setting.oss_pub_domain + '/app-img/icon/icon-add-main.png'" class="icon-size"></image>
				<view>添加解决方案</view>
			</view>
			<view v-for="(scheme, sindex) in question.schemeList" :key="scheme.id" class="flex_sbc uni-mt-32">
				<view>{{ scheme.name }}</view>
				<image
					:src="setting.oss_pub_domain + '/app-img/icon/icon_close.png'"
					class="icon-size-32"
					@click="question.schemeList.splice(sindex, 1)"
				></image>
			</view>
		</view>
		<view class="line-spacing"></view>
		<view class="uni-mx-32 uni-pb-40">
			<view class="add-course-plan flex_cc" @click="relatedCourses(index)">
				<image :src="setting.oss_pub_domain + '/app-img/icon/icon-add-main.png'" class="icon-size"></image>
				<view>添加到课程</view>
			</view>
			<view v-for="(course, cindex) in question.courseList" :key="course.id" class="flex_sbc uni-mt-32">
				<view>{{ course.name }}</view>
				<image
					:src="setting.oss_pub_domain + '/app-img/icon/icon_close.png'"
					class="icon-size-32"
					@click="question.courseList.splice(cindex, 1)"
				></image>
			</view>
		</view>
		<view class="line-spacing line-spacing-height"></view>
	</view>

	<view class="uni-mx-32 uni-pb-40">
		<view class="add-course-plan flex_cc uni-color-main-bg" @click="addDesc">
			<uni-icons type="plusempty" size="24" color="#FFFFFF"></uni-icons>
			<view class="uni-white">新增问题描述</view>
		</view>
	</view>
	<bottom-box :buts="buts" @change="submit"></bottom-box>
</template>

<script setup>
import { getQuestionDetial, getPlayerQuestionDetail, addQuestion, editQuestion, delQuestion } from '@/api/question.js';
import { addPlayerQuestion, editPlayerQuestion } from '@/api/player.js';
import { onLoad } from '@dcloudio/uni-app';
import { ref, reactive, getCurrentInstance } from 'vue';

const { proxy: that } = getCurrentInstance(),
	playerInfo = uni.getStorageSync('player-info'),
	eventChannel = that.getOpenerEventChannel();
let source = 0,
	selStudent = ref(0),
	selStudentObj = ref({});

const questionData = reactive({
	material: '',
	environment: '',
	environmentList: [],
	descList: [
		{
			name: '',
			description: '',
			descriptionTag: '',
			descriptionTagList: [],
			relCourse: '',
			courseList: [],
			relScheme: '',
			schemeList: []
		}
	]
});
onLoad((opt) => {
	source = parseInt(opt.source || 0);
	selStudent.value = parseInt(opt.selStudent || 0);
});

const title = questionData.id ? '编辑问题' : '';

const buts = [
	{
		label: '确定完成',
		bgColor: 'uni-color-main-bg'
	}
];

function submit() {
	const { environment, material, descList } = questionData;
	const postData = {
		environment,
		material,
		descList: []
	};
	let returnState = 0;
	for (let i = 0; i < descList.length; i++) {
		const { name, descriptionTag, description, courseList, schemeList } = descList[i];
		if (!descriptionTag) return that.tools.alert(`请选择"问题${i + 1}"的问题标签！`);
		if (!name) return that.tools.alert(`请输入"问题${i + 1}"的问题名称！`);
		postData.descList.push({
			name,
			descriptionTag,
			description,
			relCourse: courseList ? courseList.map((item) => item.id).join(',') : '',
			relScheme: schemeList ? schemeList.map((item) => item.id).join(',') : ''
		});
	}
	if (!selStudent.value && playerInfo.id) postData.stuId = playerInfo.id;
	if (selStudent.value && selStudentObj.value.id) postData.stuId = selStudentObj.value.id;
	const funName = postData.stuId ? addPlayerQuestion : addQuestion;
	addPlayerQuestion(postData).then((res) => {
		uni.setStorageSync('edit-question', questionData);
		that.tools.alert('添加成功');
		eventChannel.emit('editDone');
		if (source) {
			if (selStudentObj.value.id || playerInfo.id) {
				uni.setStorageSync('player-info', selStudentObj.value);
				uni.redirectTo({
					url: '/pages/question/index'
				});
			} else
				uni.redirectTo({
					url: '/pages/course/index?type=1'
				});
		} else uni.navigateBack();
	});
}

function selTag(type, index) {
	uni.setStorageSync(
		'tagSelList',
		type === 'descriptionTag' ? questionData.descList[index].descriptionTagList : questionData[type + 'List']
	);
	uni.navigateTo({
		url:
			type == 'descriptionTag'
				? '/pages/question/select-tag/select-tag'
				: '/pages/question/add-item/add-item?type=2',
		events: {
			getTag: (data) => {
				const tagName = data.obj.map((item) => item.map((el) => el.dictValue).join('-->')).join(',');
				if (type === 'descriptionTag') {
					questionData.descList[index][type] = data.code;
					questionData.descList[index][type + 'List'] = data.obj;
					questionData.descList[index][type + 'Name'] = tagName;
					if (!questionData.descList[index].name)
						questionData.descList[index].name = `${data.obj[0][0].dictValue}-->${data.obj[0][1].dictValue}`;
					if (!questionData.descList[index].tagName) questionData.descList[index].description = tagName;
				} else {
					questionData[type] = data.code;
					questionData[type + 'List'] = data.obj;
					questionData[type + 'Name'] = tagName;
				}
			}
		}
	});
}

// 选择视频或图片
function materialChange(e) {
	questionData.material = e;
}
// 关联方案
function associatedSolution(index) {
	uni.setStorageSync('select-scheme', questionData.descList[index].schemeList);
	const questionCopy = JSON.parse(JSON.stringify(questionData.descList[index]))
	questionCopy.environment = questionData.environment;
	questionCopy.environmentList = questionData.environmentList;
	uni.setStorageSync('questionCopy', questionCopy);
	uni.navigateTo({
		url: '/pages/scheme/course-select/course-select',
		events: {
			relScheme: (data) => {
				questionData.descList[index].schemeList = data;
			}
		}
	});
}

// 关联课程
function relatedCourses(index) {
	if (selStudent.value && !selStudentObj.value.id) return that.tools.alert('请选择先学员');
	if (selStudent.value) uni.setStorageSync('player-info', selStudentObj.value);
	uni.setStorageSync('select-course', questionData.descList[index].courseList);
	uni.navigateTo({
		url: '/pages/course/select/selects-single?type=1&multiple=1',
		events: {
			relCourse: (data) => {
				questionData.descList[index].courseList = data;
			}
		}
	});
}

function addDesc() {
	questionData.descList.push({
		name: '',
		description: '',
		descriptionTag: '',
		descriptionTagList: [],
		relCourse: '',
		courseList: [],
		relScheme: '',
		schemeList: []
	});
}

function delDesc(index) {
	uni.showModal({
		title: '删除提示',
		content: `确定要删除"问题${index + 1}"吗？`,
		success: (res) => {
			if (res.cancel) return;
			questionData.descList.splice(index, 1);
		}
	});
}

// 导入问题
function intoQuestion() {
	uni.navigateTo({
		url: '/pages/question/edit/to-lead-into',
		events: {
			selObj: (data) => {
				console.log(data);
				questionData.descList = [];
				data.forEach((item) => {
					const { name, description, descriptionTag, descriptionTagName, descriptionTagList } = item;
					questionData.descList.push({
						name,
						description,
						descriptionTag,
						descriptionTagName,
						descriptionTagList,
						relCourse: '',
						courseList: [],
						relScheme: '',
						schemeList: []
					});
				});
			}
		}
	});
}
</script>

<style lang="scss" scoped>
@import 'edit.scss';
</style>
